//

const MiddleSided1 = ({ data = {} }) => {
  // 处理资产总额数据
  const getAssetNum = (num) => {
    return (num / 100000000).toFixed(1)
  }

  return (
    <div id="section1">
      <div
        className="h-[34px] leading-[34px] pl-[12px] text-[#0740C4]"
        style={{
          backgroundImage: `url('/compare_title-bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "100%",
          backgroundPosition: "50%"
        }}
      >
        一、基本情况
      </div>
      <div className="h-[425px] p-[12px] bg-[rgba(255,255,255,.4)] rounded-[8px] mt-[12px] border-1 border-[#fff]">
        <div className="text-[14px]">
          <div className="h-[26px] leading-[26px] text-[#4E718F] font-[600] text-center">
            企业概况
          </div>
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {new Date(data.establishmentDateA).getFullYear()}年
              </div>
            </div>
            <div className="flex-1 text-center">成立时间</div>
            <div className="flex-1 flex">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {new Date(data.establishmentDateB).getFullYear()}年
              </div>
            </div>
          </div>
          {/* 供电面积 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.powerSupplyAreaA}万km²
              </div>
            </div>
            <div className="flex-1 text-center">供电面积</div>
            <div className="flex-1 flex">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.powerSupplyAreaB}万km²
              </div>
            </div>
          </div>
          {/* 资产总额 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {getAssetNum(data.totalAssetsA)}亿元
              </div>
            </div>
            <div className="flex-1 text-center">资产总额</div>
            <div className="flex-1 flex">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {getAssetNum(data.totalAssetsB)}亿元
              </div>
            </div>
          </div>
          {/* 供电人口 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.supplyPopulationA}万人
              </div>
            </div>
            <div className="flex-1 text-center">供电人口</div>
            <div className="flex-1 flex">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.supplyPopulationB}万人
              </div>
            </div>
          </div>
          {/* 主营收入 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.mainBusinessIncomeA}亿元
              </div>
            </div>
            <div className="flex-1 text-center">主营收入</div>
            <div className="flex-1 flex">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.supplyPopulationB}亿元
              </div>
            </div>
          </div>
          {/* 负债率 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.debtRatioA || 0}%
              </div>
            </div>
            <div className="flex-1 text-center">负债率</div>
            <div className="flex-1 flex">
              <div className="h-[20px] leading-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.debtRatioB || 0}%
              </div>
            </div>
          </div>
          {/* 结论 */}
          <div className="h-[26px] mb-[12px] leading-[26px] text-[#4E718F] font-[600] text-center">
            结论
          </div>
          <div className="text-[14px] h-[48px] text-[#357FFF] font-[500] text-center bg-[rgba(255,255,255,.8)] p-[4px] pl-[8px] pr-[8px]">
            东方供电公司供电面积和人口较大，西部供电公司资产规模和收入更高
          </div>
        </div>
      </div>
    </div>
  )
}

export default MiddleSided1
